import { FC } from 'react';
import useGetComponentInfo from '../../../../../hooks/useGetComponentInfo';
import {
  getComponentConfigByType,
  ComponentPropsType,
} from '../../../../../components/QuestionComponents';
import { useDispatch } from 'react-redux';
import { changeComponentProp } from '../../../../../store/componentReducer';
const NoProp: FC = () => {
  return <div style={{ textAlign: 'center' }}>未选中组件</div>;
};

const ComponentProp: FC = () => {
  const dispatch = useDispatch();
  const { selectedComponent } = useGetComponentInfo();
  const { isLocked } = selectedComponent || {};
  if (!selectedComponent) {
    return <NoProp />;
  }
  const { type, props } = selectedComponent;
  const componentConfigType = getComponentConfigByType(type);
  if (!componentConfigType) {
    return <NoProp />;
  }
  const { PropComponent } = componentConfigType;
  function handleChange(newProps: ComponentPropsType) {
    dispatch(changeComponentProp(newProps));
  }
  return <PropComponent {...props} onChange={handleChange} disabled={isLocked} />;
};
export default ComponentProp;
